<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-login-index {
        width: 100%;
        height: 100%;
        padding-top: 10%;
        background-color: grey;
        .login-content {
            width: 400px;
            min-height: 300px;
            margin: 0 auto;
            background-color: #fff;
            .login-box {
                position: relative;
                width: 100%;
                height: 320px;
                padding: 0 20px;
                border: 1px solid #ccc;
                h1 {
                    line-height: 80px;
                    text-align: center;
                    img {
                        width: 50%;
                    }
                }
            }
            
        }
    }

</style>
<template>
    <div class="v-admin-login-index">
        <div class="login-content">
            <div class="login-box">
                <h1>欢迎登录</h1>
                <!-- <h1>
                    <img src="http://xikachelian.oss-cn-shenzhen.aliyuncs.com/assets/xika-web-admin/icon/xika-icon.png" alt="">
                </h1> -->
                <Form ref="formData" :model="form_data" :rules="ruleInline" >
                    <Form-item prop="user">
                        <Input type="text" v-model="form_data.user" size="large" @on-enter="handleSubmit('formData')" placeholder="请输入账号...">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="password">
                        <Input type="password" v-model="form_data.password" size="large" @on-enter="handleSubmit('formData')" placeholder="请输入密码...">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item>
                        <Checkbox v-model="form_data.remember">记住密码</Checkbox>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="handleSubmit('formData')" long>登录</Button>
                    </Form-item>
                </Form>
                <Spin fix v-if="login_loading">
                    <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                    <div>正在登录...</div>
                </Spin>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">

import API_LIST from 'src/API_LIST.js';
import { mapActions, mapGetters } from 'vuex';
import { setCookie } from 'src/cookies.js';

export default {
    data() {	
        return {
            login_loading : false,  //登陆中
            form_data: {
                user: '',           //用户名
                password: '',        //密码
                remember: false     //是否记住密码
            },
            ruleInline: {
                user: [
                    { required: true, message: '请填写用户名', trigger: 'blur,change' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur,change' },
                    { type: 'string', min: 5, message: '密码长度不能小于5位', trigger: 'blur,change' }
                ]
            }

        }
    },
    computed : {


    },
    mounted(){


    },
    methods: {
        //action的引用
        ...mapActions('userToken', [
            'toSetToken'
        ]),

        //提交表单的方法
        handleSubmit(name) {

            this.$refs[name].validate((valid) => {

                if (valid) {

                    this.login_loading = true;

                    if( this.form_data.remember ){

                        this.setCookie('user',this.form_data.user,7); //保存帐号到cookie，有效期7天
                        this.setCookie('pswd',this.form_data.password,7); //保存密码到cookie，有效期7天
                    }

                    this.loginRequest(API_LIST.ADMIN_LOGIN);

                } else {
                    this.$Message.error('你输入的账号或密码有误!');
                }

            })

        },

        /**
         * @function {function loginRequest}登录
         * @param  {string=} url  {请求api的网址}
         * @return {undefined} 
         */
        loginRequest( url ) {

            const self = this;

            let params = {};

            if(window.DEBUG == 1) {

                params = {
                    'email' : self.form_data.user,
                    'password' : self.form_data.password,
                    'debug' : 'goat_debug'
                }

            }else {

                params = {
                    'email' : self.form_data.user,
                    'password' : self.form_data.password
                }

            }
            
            this.$http.post(url,params)
                    .then(function( {data} ){

                        if( parseInt(data.code) === 0 ) {

                            self.login_loading = false;

                            self.toSetToken(data.token);

                            self.$Message.success('登录成功!');

                            self.jumpToHomePage();

                        }else {

                            throw new Error(data.error);

                        }

                    })
                    .catch(function(err){

                        self.$Message.error({
                            content: err,
                            duration: 5,
                            closable: true
                        });

                        self.login_loading = false;

                    })

        },

        /**
         *  登陆后，转跳到首页
         */
        jumpToHomePage () {

            this.$router.push({
                path : '/admin'
            })
        }
        
        //检测是否存在cookie
        // checkCookie(){
        //     if (this.getCookie('user') && this.getCookie('pswd')) {
        //         this.form_data.user = this.getCookie('user');
        //         this.form_data.password = this.getCookie('pswd');
        //         this.form_data.remember = true;
        //     }
        // },
        
    }
}
</script>
